<template>
    <div class="subpage platform-news-container">
        <div class="platform-news-box">
            <!-- <van-list
                v-model="loading"
                :immediate-check="false"
                :finished="finished"
                finished-text="已加载全部了哦～"
                @load="onLoadMore"
                v-if="listData.length > 0"
            > -->
                <ul class="platform-news-list" v-if="listData.length > 0">
                    <li v-for="(item, index) in listData" :key="index" @click="goDetail(item.id)">
                        <div class="platform-news-left">
                            <p class="platform-news-title">{{item.title}}</p>
                            <p class="platform-news-date">{{item.createTime}}</p>
                        </div>
                        <div class="platform-news-right">
                            <img :src="item.picUrl" alt="">
                        </div>
                    </li>
                </ul>
            <!-- </van-list> -->
            <div class="no-data-box" v-else>
                <span v-show="showNoInfo">{{noDataText}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { List } from 'vant';
export default {
    components: {
        [List.name]: List
    },
    data() {
        return {
            noDataText: '暂无平台资讯~',
            listData: [],
            isLoading: false,
            loading: false,
            finished: false,
            pageIndex: 1,
            pageSize: 10,
            showNoInfo: false
        }
    },
    created() {
        this.getNewsList()
    },
    methods: {
        goDetail(id) {
            this.$router.push({
                name: 'platformNewsDetail',
                query: {
                    id: id
                }
            })
        },
        getNewsList() { //获取订单数据
            let apiUrl = this.pageIndex > 1 ? '/api/bulletin/list?noLoading' : '/api/bulletin/list';
            this.$api.get(apiUrl)
                .then((res) => {
                    this.showNoInfo = res.data > 0 ? false : true;
                    if(res.data.length > 0){
                        res.data.forEach((item) => {
                            if(item.createTime.indexOf('T') != -1) {
                                item.createTime = item.createTime.replace('T', ' ')
                            }
                        })
                    }
                    this.listData = this.listData.concat(res.data);
                    if(this.pageIndex > 1 && res.data.length < this.pageSize){
                        this.finished = true;
                    }
                })
        },
        onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getNewsList()
                // 加载状态结束
                this.loading = false;
            }, 500);
        }
    }
}
</script>

<style lang="scss" scoped>
    .platform-news-container {
        overflow: hidden;
        .platform-news-box {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            .platform-news-list {
                width: 100%;
                li {
                    width: 100%;
                    padding: 24px 16px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    background-color: #fff;
                    border-bottom: 1px solid #f2f2f2;
                    .platform-news-left {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .platform-news-title {
                            width: 100%;
                            overflow : hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                            color: #5D6164;
                        }
                        .platform-news-date {
                            font-size: 12px;
                            color: #969C9E;
                        }
                    }
                    .platform-news-right {
                        width: 108px;
                        height: 77px;
                        border-radius: 4px;
                        overflow: hidden;
                        margin-left: 24px;
                        img {
                            width: 108px;
                            height: 77px;
                            object-fit: cover;
                        }
                    }
                }
            }
        }
        .no-data-box {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #999;
        }
    }
</style>